<template>
  <div class="wrapper">
    <el-menu
            :default-active="'1'"
            class="el-menu-demo"
            mode="horizontal">
      <!--<el-menu-item v-for="(item,key) in showNav" :index="`${key+1}`" :key="item">{{item}}</el-menu-item>-->
      <el-menu-item>正在浏览</el-menu-item>
    </el-menu>
    <ul v-if="customerTraceInfo.browsingGoodItem.id">
      <li>
        <el-row>
          <div class="row-item">
            <div class="row-item-good">
              <img :src="customerTraceInfo.browsingGoodItem.thumbnailUrl"  alt=""/>
              <p>{{customerTraceInfo.browsingGoodItem.title}}</p>
            </div>
            <div class="row-item-price">
              <span>金额: {{customerTraceInfo.browsingGoodItem.price}}元</span><el-button class="web__msg-submit" type="primary" size="mini" @click="onSendBrowsingGoodItem(customerTraceInfo.browsingGoodItem)">发送</el-button>
            </div>
          </div>
        </el-row>
      </li>
    </ul>

    <el-menu
      :default-active="activeNavIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleChangeNav"
    >
      <el-menu-item v-for="(item,key) in showNav" :index="`${key+1}`" :key="item">{{item}}</el-menu-item>
    </el-menu>

    <!-- activeNavIndex=1, 顾客订单 -->
    <ul class="item-list" v-if="activeNavIndex === '1' && customerTraceInfo.customOrder.id">
      <li v-for="(item,index) in [customerTraceInfo.customOrder]" :key="item.id">
        <el-row>
          <div class="row-item">
            <div class="row-item-ordercode">
              <p>订单号: {{item.code}}</p>
            </div>
            <div class="row-item-good">
              <img :src="item.thumbnailUrl"  alt=""/>
              <p>{{item.title}}</p>
            </div>
            <div class="row-item-price">
              <span>金额: {{item.price}}元</span><el-button class="web__msg-submit" type="primary" size="mini" @click="onSendListItem(item, activeNavIndex)">发送</el-button>
            </div>
          </div>
        </el-row>
      </li>
    </ul>

    <!-- activeNavIndex=2, 最近浏览 -->
    <ul class="item-list" v-if="activeNavIndex === '2'">
      <li v-for="(item,index) in customerTraceInfo.recentGoodItem" :key="item.id">
        <el-row>
          <div class="row-item">
            <div class="row-item-good">
              <img :src="item.thumbnailUrl"  alt=""/>
              <p>{{item.title}}</p>
            </div>
            <div class="row-item-price">
              <span>金额: {{item.price}}元</span><el-button class="web__msg-submit" type="primary" size="mini" @click="onSendListItem(item, activeNavIndex)">发送</el-button>
            </div>
          </div>
        </el-row>
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  name: 'ECTrace',
  props: {
    customerTraceInfo: Object,
    config: Object
  },
  data () {
    return {
      activeNavIndex: '1',

    }
  },
  computed: {
    showNav () {
      return ['顾客订单', '最近浏览']
    },
  },
  methods: {
    handleChangeNav (index) {
      this.activeNavIndex = index;
      this.emit({ key: 'navIndex', value: index })
    },
    // 正在正在浏览商品
    onSendBrowsingGoodItem (item) {
      this.$emit('itemSend',{
          data: item,
          category: 'browsingGoodItem'
        });
    },
    // 发送顾客订单/最近浏览商品
    onSendListItem (item, activeNavIndex) {
      this.$emit('itemSend',{
          data: item,
          category: activeNavIndex === '1' ? 'customOrder' : 'recentGoodItem'
        });
    },
    emit (play) {
      this.$emit('event', play)
    }
  },
  mounted(){
    // console.log('pass customerTraceInfo:' + this.customerTraceInfo);
  }
}
</script>
<style scoped>
.el-menu-demo {
  width: 100%;
  height: 42px;
  line-height: 40px;
  display: flex;
  position: relative;
}
.el-menu-demo > * {
  height: unset;
  line-height: unset;
  width: 40%;
  padding: 0;
  text-align: center;
  box-shadow: none;
}
.addBtn {
  width: 20%;
  position: absolute;
  right: 0;
}
.addBtn:focus {
  outline: none;
  text-align: center;
}
.wrapper {
  padding: 0;
  height: 100%;
  width: 0;
  max-width: 100%;
  min-width: 220px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
ul.item-list {
  padding: 0;
  list-style: none;
  height: 55%;
  overflow: auto;
}
ul.item-list li {
  padding: 0.5rem;
  padding-right: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0.2rem 0;
}
ul.item-list li p {
  margin: 0;
  /* width: 95%; */
}
ul.item-list li:hover i {
  display: inline-block;
}
ul.item-list li i {
  /* display: none; */
  margin: 0 0.05rem;
}
ul.item-list i:hover {
  color: #409eff;
  cursor: pointer;
}



.row-item {
  display: flex;
  flex-direction: column;
}

.row-item-ordercode{
  display: flex;
  flex-direction: row;
  margin: 8px;
}

.row-item-good {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 8px;
}

.row-item-good img{
  width: 60px;
  height: 56px;
}

.row-item-good p{
  max-height: 60px;
  margin-left:4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.row-item-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 8px;
  min-height: 32px;
}

.row-item-price span{

}

.web__msg-submit {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
}

</style>
